<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { ChannelItem, ChannelResData } from '../types/data'
import { useChannelStore } from '../store/channel'

const channelStore = useChannelStore()

const channels = ref<ChannelItem[]>([])
defineProps({
  channelId: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['changeChannelId'])

axios.request<ChannelResData>({
  url: 'http://geek.itheima.net/v1_0/channels',
  method: 'get'
}).then((res) => {
  // 给数据赋值
  channels.value = res.data.data.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: channelStore.channelId === item.id }" href="javascript:;"
        v-for="(item, i) in channels" :key="item.id" @click="channelStore.changeChannelId(item.id)">
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>